import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/dash_line_common.dart';
import 'package:xinxuan/common/goods_info_common.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/controllers/my_controller/blind_box_order_controller/pick_up_code_page_controller.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/utils/refresh_util.dart';
import 'package:common_utils/common_utils.dart';

class PickUpCodePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<PickUpCodePageController>(
      init: PickUpCodePageController(),
      builder: (controller) {
        return Scaffold(
          backgroundColor: pageBgColor,
          appBar: AppBarUtil(
            title: '待提货',
            backgroundColor: pageBgColor,
          ),
          body: ScrollConfigurationCommon(child: ListView(
            children: [
              Obx(() => Container(
                padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 12.h),
                color: bgWhiteColor,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '商品信息',
                          style: TextStyle(
                            color: textBlackColor,
                            fontSize: 14.sp,
                            fontWeight: FontWeight.bold
                          ),
                        ),
                        Text(
                          controller.statusStr.value,
                          style: TextStyle(
                            color: mainTextColor,
                            fontSize: 14.sp
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 12.h),
                    Column(
                      children: controller.products.map((productItem) {
                        return GoodsInfoCommon(
                          title: productItem['title'], 
                          headImage: productItem['image'],
                          quantity: productItem['quantity']
                        );
                      }).toList(),
                    )
                  ],
                ),
              )),
              Container(
                color: bgWhiteColor,
                margin: EdgeInsets.only(top: 12.h),
                child: Column(
                  children: [
                    _storeSelectedItem(controller),
                    _timeSelectedItem(controller, context)
                  ],
                ),
              )
            ],
          )),
          bottomNavigationBar: BottomAppBar(
            child: Container(
              height: 56.h,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    width: 120.w,
                    child: ButtonUtil(
                      text: '取消', 
                      fontSize: 14.sp, 
                      borderRadius: 36.h, 
                      height: 36.h, 
                      textColor: textSubtitleColor,
                      showBorder: true,
                      borderColor: lineColor,
                      bgColors: [
                        bgWhiteColor,
                        bgWhiteColor
                      ],
                      onTop: () {
                        Get.back();
                      }
                    ),
                  ),
                  Container(
                    width: 120.w,
                    margin: EdgeInsets.only(left: 12.w),
                    child: ButtonUtil(
                      text: '确认', 
                      fontSize: 14.sp, 
                      borderRadius: 36.h, 
                      height: 36.h,
                      onTop: () {
                        controller.submitMark();
                      }
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  /// 选择项
  Widget _selectedItem({ required String title, required String subTitle, required Function onTap, String value = '', bool showBorder = true }) {
    return Container(
      width: 375.w,
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: showBorder ? BorderSide(
            width: .5,
            color: lineColor
          ) : BorderSide.none
        )
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              color: textBlackColor,
              fontSize: 14.sp
            ),
          ),
          InkWellUtil.shakeProofInkWell(Container(
            margin: EdgeInsets.only(top: 12.h),
            height: 44.h,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            decoration: BoxDecoration(
              border: Border.all(
                color: lineColor,
                width: 1
              ),
              borderRadius: BorderRadius.circular(5.w)
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  TextUtil.isEmpty(value) ? subTitle : value,
                  style: TextStyle(
                    color: TextUtil.isEmpty(value) ? textSubtitleColor : textBlackColor,
                    fontSize: 14.sp
                  ),
                ),
                Image.asset(
                  'assets/icons/icon_arrow_right_w.png',
                  width: 16.w,
                  height: 16.w,
                )
              ],
            ),
          ), () {
            onTap();
          })
        ],
      ),
    );
  }

  /// 门店选择项
  Widget _storeSelectedItem(PickUpCodePageController controller) {
    return Obx(() => _selectedItem(title: '请选择自提门店', subTitle: '请选择自提门店', value: controller.storeName.value, onTap: () {
      Get.bottomSheet(StatefulBuilder(
        builder: (context, setButtomSheetState) {
          return Stack(
            children: [
              Container(
                height: 482.h + ScreenUtil().bottomBarHeight,
                width: 375.w,
                color: bgWhiteColor,
                padding: EdgeInsets.only(top: 27.h),
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(bottom: 8.h),
                      child: Text(
                        '选择自提门店',
                        style: TextStyle(
                          color: textBlackColor,
                          fontSize: 16.sp
                        ),
                      ),
                    ),
                    Container(
                      height: 52.h,
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Container(
                        height: 36.h,
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 1,
                            color: lineColor
                          ),
                          borderRadius: BorderRadius.circular(36.h)
                        ),
                        child: Row(
                          children: [
                            Image.asset(
                              'assets/icons/icon_search.png',
                              width: 14.w,
                              height: 14.w,
                            ),
                            SizedBox(width: 12.w),
                            Expanded(child: TextField(
                              textAlignVertical: TextAlignVertical.center,
                              decoration: InputDecoration(
                                // isDense: true,
                                // border: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                                // enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                                // focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                                border: OutlineInputBorder(borderSide: BorderSide.none),
                                contentPadding: EdgeInsets.zero,
                                counterText: '',
                                hintText: '搜索自提门店',
                                hintStyle: TextStyle(
                                  fontSize: 14.sp,
                                  color: tipsColor,
                                )
                              ),
                              textInputAction: TextInputAction.search,
                              cursorColor: textBlackColor,
                              style: TextStyle(
                                fontSize: 14.sp,
                                color: textBlackColor
                              ),
                              onChanged: (String value) {
                                controller.searchTitle = value;
                              },
                              onSubmitted: (String value) async {
                                controller.searchTitle = value;
                                bool res = await controller.getStores();
                                if (res) {
                                  setButtomSheetState((){});
                                }
                              },
                            ))
                          ],
                        ),
                      ),
                    ),
                    Expanded(child: ScrollConfigurationCommon(child: RefreshUtil.easyRefresh(
                      onRefresh: () async {
                        bool res = await controller.getStores();
                        if (res) {
                          setButtomSheetState((){});
                        }
                      },
                      onLoad: () async {
                        bool res = await controller.onLoadStores();
                        if (res) {
                          setButtomSheetState((){});
                        }
                      },
                      slivers: controller.storeListVo.value.data!.map((item) {
                        return SliverToBoxAdapter(
                          child: InkWellUtil.shakeProofInkWell(Container(
                            padding: EdgeInsets.only(right: 34.w, top: 12.h),
                            child: Column(
                              children: [
                                Row(
                                  children: [
                                    Container(
                                      width: 34.w,
                                      alignment: Alignment.centerRight,
                                      margin: EdgeInsets.only(right: 6.w),
                                      child: Image.asset(
                                        'assets/icons/icon_address_store.png',
                                        width: 14.w,
                                        height: 14.w,
                                      ),
                                    ),
                                    Expanded(child: Text(
                                      '${item.title}',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        color: textBlackColor,
                                        fontSize: 14.sp,
                                        fontWeight: FontWeight.bold
                                      ),
                                    ))
                                  ],
                                ),
                                SizedBox(height: 6.h),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Container(width: 34.w, margin: EdgeInsets.only(right: 6.w),),
                                    Expanded(child: Text(
                                      '${item.address}',
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        color: textSubtitleColor,
                                        fontSize: 14.sp
                                      ),
                                    )),
                                    Image.asset(
                                      controller.storeId.value == item.id ? 'assets/icons/icon_radio_fill.png' : 'assets/icons/icon_radio_line.png',
                                      width: 20.w,
                                      height: 20.w,
                                    )
                                  ],
                                ),
                                SizedBox(height: 12.h),
                                Row(
                                  children: [
                                    Container(width: 34.w, margin: EdgeInsets.only(right: 6.w),),
                                    Expanded(child: Container(
                                      child: DashLineCommon(
                                        color: bgSubColor,
                                        height: .5,
                                        dashWidth: 10,
                                      ),
                                    ))
                                  ],
                                ),
                              ],
                            ),
                          ), () {
                            controller.storeId.value = item.id!;
                            controller.storeName.value = item.title!;
                            setButtomSheetState((){});
                            controller.timeValue.value = '';
                            Get.back();
                            controller.getStoreTimeList();
                          })
                        );
                      }).toList()
                    )))
                  ],
                ),
              ),
              Positioned(
                top: 14.h,
                right: 12.w,
                child: InkWellUtil.shakeProofInkWell(Image.asset(
                  'assets/icons/icon_close.png',
                  width: 20.w,
                  height: 20.w,
                ), () {
                  Get.back();
                })
              )
            ],
          );
        }
      ));
    }));
  }

  /// 时间选择项
  Widget _timeSelectedItem(PickUpCodePageController controller, BuildContext context) {
    return Obx(() => _selectedItem(title: '请选择自提时间', subTitle: '请选择时间', value: controller.timeValue.value, showBorder: false, onTap: () {
      DatePicker.showPicker(
        context,
        locale: LocaleType.zh,
        theme: DatePickerTheme(
          containerHeight: 250.h,
          cancelStyle: TextStyle(
            color: textBlackColor,
            fontSize: 16.sp
          ),
          doneStyle: TextStyle(
            color: mainTextColor,
            fontSize: 16.sp
          ),
          itemStyle: TextStyle(
            color: textBlackColor,
            fontSize: 18.sp
          ),
          itemHeight: 46.h
        ),
        pickerModel:  DatePickerModel(
          locale: LocaleType.zh,
          showSecondsColumn: true,
          minTime: controller.startTime,
          maxTime: controller.endTime
        ),
        onConfirm: (DateTime value) {
          controller.onConfirmTime(value);
        }
      );
    }));
  }
}